<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no" />
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body,
        html,
        p,
        div,
        ul,
        li,
        a {
            padding: 0;
            margin: 0;
            text-decoration: none;
        }

        ul,
        li {
            list-style: none;
        }

        .img-container {
            box-sizing: border-box;
            width: 100%;
            overflow: hidden;
            padding: 20px 15px;
            border-radius: 20px;
            background-color: rgba(0, 0, 0, 0.2);
        }

        .img-container .img_scroll {
            width: 100%;
            overflow: hidden;
            position: relative;
            top: 0;
            left: 0;
            z-index: 99;

        }


        .img-container .slidebg {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 99;
        }

        .img-container .img-list {
            overflow: hidden;
            position: relative;
            width: 100%;
        }

        .img-container .img-list ul {
            display: flex;

        }

        .img-container .img_scroll .img-list a {
            display: block;
        }

        .img-container .img_scroll .img-list img {
            display: block;
            vertical-align: top;
        }

        .img-container .img_scroll .img-list li {
            flex-shrink: 0;
            color: #ffffff;
            opacity: 0.8;
            font-size: 28px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

        }
    </style>
    <title></title>
</head>

<body>


    <div class="img-container">

    </div>
    <script type="text/javascript">
        var mybase = {
            myScroll: function (opts) {
                var defaults = {
                    autoplay: true, //是否自动播放
                    autotime: 5000, //间隔时间
                };
                var opts = $.extend(defaults, opts);
                var i = 0;
                var ww = $(opts.el).width();
                var l = opts.imgList.length;
                var con;
                var nav;
                picsrender();

                function picsrender() {
                    var s = ' <div class="img_scroll"><div class="img-list">\<ul class="img-con">';
                    for (var j = 0; j < l; j++) {
                        s += '<li>' + opts.imgList[j] + '</li>';
                    };


                    s += '</ul></div>';
                    $(opts.el).append(s);
                    con = $(opts.el).find('.img-list ul');
                    $(window).resize(function () {
                        ww = $(opts.el).width();;
                        $('.img_scroll').css({
                            'width': ww
                        });
                        $('.img-list').css({
                            'width': ww
                        });
                        $('.img-list li').css({
                            'width': ww
                        });
                    });
                    $('.img_scroll').css({
                        'width': ww
                    });
                    $('.img-list').css({
                        'width': ww
                    });
                    $('.img-list li').css({
                        'width': ww
                    });
                    if (opts.autoplay == true) {
                        var MyMar = setInterval(Next, opts.autotime);
                    }
                    $(opts.el).on('click', '.prev', function () {
                        Prev();
                    })
                    $(opts.el).on('click', '.next', function () {
                        Next();
                    })

                }

                function Next() {
                    i++;
                    if (i == l) {
                        i = 0;
                    }
                    con.animate({
                        'margin-left': -ww
                    }, function () {
                        con.find('li').eq(0).appendTo(con);
                        con.css({
                            'margin-left': 0
                        });
                    });
                }

                function Prev() {
                    i--;
                    if (i == -1) {
                        i = l - 1;
                    }
                    con.find('li:last').prependTo(con);
                    con.css({
                        'margin-left': -ww
                    });
                    con.animate({
                        'margin-left': 0
                    });
                }


            }
        }
        $(function () {
            mybase.myScroll({
                autoplay: true, //是否自动播放
                el: '.img-container',
                autotime:7000,
                imgList: ['好雨知时节好雨知时节好雨知时节好雨知时节好雨知时节好雨知时节好雨知时节好雨知时节好雨知时节好雨知时节好雨知时节好雨知时节好雨知时节', '当春乃发生',
                    '随风潜入夜', '润物细无声'
                ]
            });




        })
    </script>
</body>

</html>